<template>
  <div>
    <a-modal title="数据权限组授权" :visible="visible" :footer="false" @open="open" @cancel="handleCancel" :align-center="false" title-align="start" top="20px" width="1200px" :mask-closable="false">
      <div class="impower-con clearfix" v-loading="userLoading">
        <div class="left fl">
          <div class="top">
            <div>{{ info.name }}</div>
            <div class="time-text">{{ info.remark }}</div>
          </div>
          <div class="bottom mt10">
            <div class="title">已授权成员</div>
            <a-space class="mt10">
              <a-select v-model="selUserId" placeholder="请选择" @change="selectUser" allow-search allow-clear :style="{ width: '130px' }">
                <a-option v-for="item of userList" :label="item.userName" :value="item.id"></a-option>
              </a-select>
              <a-button class="gray-outline" @click="setAuth">授权</a-button>
            </a-space>
            <ul class="user-con">
              <a-scrollbar style="max-height: 580px; overflow: auto" v-if="perUserList[0]">
                <div>
                  <li v-for="(item, index) of perUserList">
                    <div>{{ item.userName }}（{{ item.deptName }}）</div>
                    <div class="cursor">
                      <icon-close @click="perUserList.splice(index, 1)" />
                    </div>
                  </li>
                </div>
              </a-scrollbar>
              <a-empty v-if="!perUserList[0]" />
              <div class="modal-footer mt10">
                <a-button type="primary" @click="setAuth">保存</a-button>
              </div>
            </ul>
          </div>
        </div>

        <div class="line fl"></div>

        <div class="right fl">
          <a-tabs size="mini" v-model:active-key="currentPage" @change="getDetail">
            <a-tab-pane key="1" title="店铺">
              <ImpowerShop :refresh="getDetail" v-if="currentPage == '1'" :info="detailInfo" />
            </a-tab-pane>
            <a-tab-pane key="2" title="仓库">
              <ImpowerWarehouse :refresh="getDetail" v-if="currentPage == '2'" :info="detailInfo" />
            </a-tab-pane>
            <a-tab-pane key="3" title="供应商">
              <ImpowerSupplier :refresh="getDetail" v-if="currentPage == '3'" :info="detailInfo" />
            </a-tab-pane>
            <a-tab-pane key="4" title="成员">
              <ImpowerUser :refresh="getDetail" v-if="currentPage == '4'" :userList="userList" :info="detailInfo" />
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { getDataPermissonGroup, getOrganizesUser, saveOrUpdateDataPermissonGroup } from '@/api/system'
  import FilterTable from '@/components/TableFilter.vue'
  import ImpowerShop from './impowerShop.vue'
  import ImpowerWarehouse from './impowerWarehouse.vue'
  import ImpowerSupplier from './impowerSupplier.vue'
  import ImpowerUser from './impowerUser.vue'
  export default defineComponent({
    props: ['info'],
    components: {
      FilterTable,
      ImpowerShop,
      ImpowerWarehouse,
      ImpowerSupplier,
      ImpowerUser,
    },
    setup(props: any, { emit }) {
      let visible = ref(false)
      const data: any = reactive({
        loading: false,
        currentPage: '1',
        selUserId: '',
        filterItem: [
          {
            key: 'shopIds',
            label: '店铺名称',
            value: ref(),
            type: 'input_search',
            tabType: 'shop',
            width: 200,
          },
          {
            key: 'shopIds',
            label: 'SellerID',
            value: ref(),
            type: 'input_search',
            tabType: 'shop',
            width: 200,
          },
          {
            key: 'shopIds',
            label: '店长',
            value: ref(),
            type: 'input_search',
            tabType: 'shop',
            width: 200,
          },
        ],
        detailInfo: {},
        userList: [],
        perUserList: [],
        userLoading: false,
      })

      const open = () => {
        data.currentPage = '1'
        getDetail()
        getUserList()
      }

      const getUserList = async () => {
        let params = {
          depart: false,
          needRole: false,
          pageNum: 1,
          pageSize: 1000,
        }
        try {
          data.userLoading = true
          const res: any = await getOrganizesUser(params)
          data.userList = res?.data?.records || []
        } catch (error) {}
        data.userLoading = false
      }

      const getDetail = async () => {
        const res: any = await getDataPermissonGroup({ id: props.info.id })
        data.detailInfo = res?.data || {}
        data.perUserList = data?.detailInfo?.userList || []
      }

      const handleOk = () => {}
      const handleCancel = () => {
        emit('save')
        data.selUserId = ''
        visible.value = false
      }

      const selectUser = (val: string) => {
        let item: any = data.userList.find((e: any) => e.id == val)
        let index = data.perUserList.findIndex((e: any) => e.id == item.id)
        if (index == -1) data.perUserList.push(item)
      }

      const setAuth = async () => {
        // if (!data.perUserList[0]) {
        //   return Message.error('请选择需要授权的成员')
        // }
        let params = data.detailInfo
        let ids = data.perUserList ? data.perUserList.map((e: any) => e.id) : []
        params.userIdList = ids
        await saveOrUpdateDataPermissonGroup([params])
        Message.success('用户授权成功')
        getDetail()
        data.selUserId = ''
      }

      return {
        ...(toRefs(data) as any),
        visible,
        open,
        handleOk,
        handleCancel,
        selectUser,
        setAuth,
        getDetail,
      }
    },
  })
</script>

<style lang="less" scoped>
  .impower-con {
    width: 100%;
    display: flex;
    .left {
      width: 200px;
      padding: 5px;
      box-sizing: border-box;
      .bottom {
        .title {
          line-height: 30px;
          border-bottom: 1px dashed #d7d7d7;
        }

        .user-con {
          li {
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            background-color: #d7d7d7;
            margin-top: 3px;
            padding: 0 10px;
            display: flex;
            justify-content: space-between;
          }
        }
      }
    }

    .line {
      height: auto;
      border-left: 1px solid #d7d7d7;
    }

    .right {
      width: calc(100% - 200px);
      padding: 0 10px;
      // border-left: 1px solid #d7d7d7;
    }
  }
</style>
